<template>
  <div>ShowInfo: {{ name }}-{{ age }}</div>
  <button @click="showInfoBtnClick">showInfoButton</button>
</template>

<script setup>

// 定义props
const props = defineProps({
  name: {
    type: String,
    default: "默认值"
  },
  age: {
    type: Number,
    default: 0
  }
})

// 绑定函数, 并且发出事件
const emits = defineEmits(["infoBtnClick"])
function showInfoBtnClick() {
  emits("infoBtnClick", "showInfo内部发生了点击")
}

// 定义foo的函数
function foo() {
  console.log("foo function")
}
// 原因：使用 <script setup> 语法糖的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
// 方法：为了在 <script setup> 语法糖组件中明确要暴露出去的属性，，使用 defineExpose 编译器宏将需要暴露出去的变量与方法放入暴露出去就可以
// 子组件使用defineExpose 暴露示例


defineExpose({
  foo
})

</script>

<style scoped>
</style>

